<template>
  <div>
    <div class="top">
      <div class="person-info">
        <div class="flexCenter">
          <!--<img src="//y.gtimg.cn/music/photo_new/T002R300x300M0000007BYT74PyoOO.jpg" alt="">-->
          <img src="../../images/gdlogo.png" alt="">
        </div>
      </div>
    </div>
    <div class="container">

      <div class="cell flexLeft">
        <span class="iconfont icon-shouji"></span>
        <input type="tel" v-model="info.UserPhone" placeholder="请输入账号">
      </div>
      <div class="cell flexLeft">
        <span class="iconfont icon-mima"></span>
        <input type="password" v-model="info.UserPwd" placeholder="请输入密码  (初始密码123456)">
      </div>

      <div class="flexAround">
        <label class="registerType" for="guider">
          <input value="1" v-model="info.UserType" name="type" id="guider" type="radio">
          导购员
        </label>
        <label class="registerType" for="customer">
          <input value="2" v-model="info.UserType" name="type" id="customer" type="radio">
          消费者
        </label>
      </div>
      <button @click="login"
              :class="{'btn-big-error':info.UserPhone.length==11,'btn-big-default':info.UserPhone.length!=11}"
              class="btn-big">登录
      </button>
      <div class="tips flexBetween">
        <span @click="forgetPwd">忘记密码？</span>
        <span @click="goRegister">快速注册</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {setStore, getStore} from '../../config/mUtils'
  import {Toast} from 'mint-ui';


  export default {
    name: "login",
    data() {
      return {
        info: {
          UserPhone: '',
          UserPwd: '',
          UserType: 2,
          eid: 0
        }
      }
    },
    methods: {
      forgetPwd() {
        this.$router.push({
          path: '/forgetPwd',
          query: {
            eid: this.info.eid
          }
        })
      },
      goRegister() {
        this.$router.push({
          path: '/register',
          query: {
            eid: this.info.eid
          }
        })
      },
      goMallIndex() {
        //replace不会在history中留下记录，就能禁止返回到登录页了
        this.$router.replace({
          path: '/mallIndex'
        })
      },
      login() {
        this.$axios.post('Integral.user.logon', this.info).then((p) => {
          if (p.data.status == '10001') {
            setStore('userInfo', p.data.result);
            Toast({
              message: '登录成功',
              iconClass: 'iconfont icon-dui',
              duration: 1500
            });
            setTimeout(() => {
              this.goMallIndex()
            }, 1500)
          } else {
            Toast({
              message:p.data.msg,
              iconClass: 'iconfont icon-cuo',
              duration: 1800
            });
          }
        })
      },
      //手机系统类型
      systemType() {
        var u = navigator.userAgent, app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) { //这个是安卓操作系统
          return 'sys_android'
        }
        if (isIOS) {//这个是ios操作系统
          return 'sys_ios'
        }
      },
      //客户端是android 还是ios
      clientType() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          return 'client_android'
        } else {
          return 'client_ios'
        }
      }
    },
    created() {
      if (this.$route.query.phone) {
        this.info.UserPhone = this.$route.query.phone;
        this.info.UserPwd = this.$route.query.pwd;
        this.info.UserType = this.$route.query.userType;
      }
      if (this.$route.query.eid) {
        this.info.eid = this.$route.query.eid;
      }
    },
    mounted() {
      // console.log(this.systemType())
      // Toast({
      //   message: this.systemType(),
      //   iconClass: 'iconfont icon-dui',
      //   duration: 1500
      // });
			console.log(this.$md5('holle'))
    }
  }
</script>

<style lang="scss" scoped>
  body {
    background: white;
  }

  .top {
    position: relative;

    .person-info {
      padding: 2.13rem 0;

      img {
        width: 2.99rem;
        height: 2.99rem;
        /*border-radius: 100%;*/
      }
    }
  }

  .container {
    width: 90%;
    margin: 0 auto;

    .cell {
      border-bottom: 1px solid #E7EAED;
      padding-bottom: 5px;
      margin-bottom: 10px;

      .iconfont {
        font-size: 1rem;
        margin-right: 0.43rem;
        margin-left: 0.43rem;
        color: #B8B8B8;
      }

      input {
        flex: 1;
        background: none;
        height: 1.49rem;
        border: none;
        outline: none;
        font-size: 16px;
      }
    }

    .tips {
      span {
        color: #B8B8B8;
        font-size: 0.51rem;
        margin-top: 0.43rem;
        padding: 0.43rem;
      }
    }
  }

  .registerType {
    font-size: 0.68rem;
    margin: 0.43rem 0 0.64rem;
    color: #B8B8B8;

    input {
      margin-left: 0.43rem;
    }
  }

</style>
